<!--
Sandstorm - Personal Cloud Sandbox
Copyright (c) 2014 Sandstorm Development Group, Inc. and contributors
All rights reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<template name="credentialLoginInterstitial">
{{#let txt="accounts.identity.identityLoginInterstitial"}}
  {{!--
    Interstitial to display when the user is logged in as a credential, rather than as an account.
  --}}
  <div class="credential-login-interstitial">
    {{#sandstormTopbarItem name="title" priority=5 topbar=globalTopbar}}
      {{_ "accounts.identity.identityLoginInterstitial.title"}}
    {{/sandstormTopbarItem}}

    <div class="centered-content">
    {{#with state=state}}
      {{!-- separate blocks for each possible state --}}

      {{#if state.loading}}
        <h1>{{_ (con txt "loading")}}</h1>
      {{/if}}

      {{#if state.creatingAccount}}
        <h1>{{_ (con txt "create")}}</h1>
        <button class="logout">{{_ (con txt "cancelButton")}}</button>
      {{/if}}

      {{#if state.accountCreationFailed}}
        <h1>{{_ (con txt "createFailed")}}</h1>
        {{#focusingErrorBox}}
          {{state.accountCreationFailed.message}}
        {{/focusingErrorBox}}
        <button class="logout">{{_ (con txt "logoutButton")}}</button>
      {{/if}}

      {{#if state.loggingInWithCredential}}
        <h1>{{_ (con txt "loginAccount")}}</h1>
        <button class="logout">{{_ (con txt "cancelButton")}}</button>
      {{/if}}

      {{#if state.loginWithCredentialFailed}}
        <h1>{{_ (con txt "loginAccountFailed")}}</h1>
        {{#focusingErrorBox}}
          {{state.loginWithCredentialFailed.message}}
        {{/focusingErrorBox}}
        <button class="logout">{{_ (con txt "logoutButton")}}</button>
      {{/if}}

      {{#if state.loggingInWithToken}}
        <h1>{{_ (con txt "loginToken")}}</h1>
        <button class="logout">{{_ (con txt "cancelButton")}}</button>
      {{/if}}

      {{#if state.loginWithTokenFailed}}
        <h1>{{_ (con txt "loginTokenFailed")}}</h1>
        {{#focusingErrorBox}}
          {{state.loginWithTokenFailed.message}}
        {{/focusingErrorBox}}
        <button class="logout">{{_ (con txt "logoutButton")}}</button>
      {{/if}}

      {{#if state.linkingCredential}}
        <h1>{{_ (con txt "link")}}</h1>
        <button class="logout">{{_ (con txt "cancelButton")}}</button>
      {{/if}}

      {{#if state.credentialIsNotLoginCredential}}
        {{#with unlinkCredentialState=unlinkCredentialState}}
          {{#if unlinkCredentialState.success}}
            {{#focusingSuccessBox}}
              {{_ (con txt "success") unlinkCredentialState.success.name}}
            {{/focusingSuccessBox}}
          {{/if}}

          <br>
          <p>{{_ (con txt "explanation")}}</p>
          {{>credentialCard currentCredential}}
          <p class="warning-banner">{{_ (con txt "warning")}}</p>
          <p>{{_ (con txt "moreIdentities")}}</p>
          <ul>
            {{#each account in nonloginAccounts}}
              {{#each credential in account.credentials}}
              <li>
                {{> credentialCardSignInButton credential=credential}}
                {{#with credential=credential account=account}}
                  <button class="unlink"
                          title="{{_ (con txt "unlinkButton.hint")}}">
                    {{_ (con txt "unlinkButton.text")}}
                  </button>
                {{/with}}
              </li>
              {{/each}}
            {{/each}}
          </ul>
          <button class="logout">{{_ (con txt "goBackButton")}}</button>

          {{#if modalContext}}
            {{#modalDialogWithBackdrop onDismiss=cancelUnlink}}
              {{#if unlinkCredentialState.error}}
                {{#focusingErrorBox}}
                  {{unlinkCredentialState.error.error.reason}}
                {{/focusingErrorBox}}
              {{/if}}

              {{#with context=modalContext}}
              <p>
                {{_ (con txt "unlink.explanation") context.name}}
              </p>
              {{/with}}

              <form class="standard-form">
                <div class="button-row">
                  <button class="danger" type="button" name="confirm-unlink" disabled={{unlinkCredentialState.unlinking}}>
                    {{_ (con txt "unlink.unlinkButton")}}
                  </button>
                  <button type="button" name="cancel-unlink">
                    {{_ (con txt "unlink.cancelButton")}}
                  </button>
                </div>
              </form>
            {{/modalDialogWithBackdrop}}
          {{/if}}
        {{/with}}
      {{/if}}
    {{/with}}
    </div>
  </div>
{{/let}}
</template>

<template name="credentialManagementButtons">
{{#let txt="accounts.identity.identityManagementButtons"}}
  <div class="credential-management-controls">
    <div class="toggle-login">
      <label title={{disableToggleLogin.why}}>
        <input class="toggle-login" type=checkbox checked={{isLogin}} disabled={{disableToggleLogin}}
               data-credential-id="{{_id}}">
        {{_ (con txt "toggleLogin.label")}}
      </label>
    </div>
    {{>loginCredentialsOfLinkedAccounts _id=_id}}
    <div>
      <button class="unlink-credential" data-credential-id="{{_id}}">
        {{_ (con txt "toggleLogin.unlinkButton")}}
      </button>
    </div>
  </div>
{{/let}}
</template>

<template name="loginCredentialsOfLinkedAccounts">
{{#let txt="accounts.identity.loginIdentitiesOfLinkedAccounts"}}
  {{#if showOtherAccounts}}
  <div class="login-credentials-of-linked-accounts">
    <p>{{_ (con txt "show.explanation")}}</p>
    <ul class="unlinkable-credentials">
      {{#each getOtherAccounts}}
      <li>
        {{> credentialCard .}}
        <button class="unlink" data-user-id="{{loginAccountId}}">{{_ (con txt "show.unlinkButton")}}</button>
      </li>
      {{/each}}
    </ul>
    <button class="hide-other-accounts">{{_ (con txt "show.hideButton")}}</button>
  </div>
  {{else}}
  {{#if getOtherAccounts}}
  <div class="login-credentials-of-linked-accounts">
    {{_ (con txt "hide.explanation")}}
    <button class="show-other-accounts">{{_ (con txt "hide.showButton")}}</button>
  </div>
  {{/if}}
  {{/if}}
{{/let}}
</template>

<template name="credentialPicker">
  <ul class="credential-card-list">
    {{#each credentials}}
    <li class="{{#if isCurrentCredential}}current-credential{{/if}}">
      <button class="pick-credential" data-credential-id="{{_id}}">
        {{> credentialCard .}}
      </button>
    </li>
    {{/each}}
  </ul>
</template>

<template name="credentialCard">
 <div class="credential-card">
  <div class="login-provider-icon">
    <span class="provider-icon {{serviceName}}">{{serviceName}}</span>
  </div>
  <div class="name">{{intrinsicName}}</div>
 </div>
</template>

<template name="accountCard">
 <div class="account-card">
  <div class="picture" style="background-image: url('{{ profile.pictureUrl }}');"></div>
  <div class="name">{{profile.name}}</div>
  {{#each intrinsicNames}}
    <div class="intrinsic-name" data-service-name="{{service}}">{{name}}</div>
  {{/each}}
 </div>
</template>

<template name="credentialCardSignInButton">
  <div class="credential-card-sign-in">
  <button class="sign-in" title="{{_ "accounts.identity.identityCardSignInButton.hint" credential.intrinsicName}}"
          disabled={{clicked}}>
    {{> credentialCard credential }}
  </button>
  {{#if clicked}}
    {{#with form}}
      <h4>{{_ "accounts.identity.identityCardSignInButton.title"}}</h4>
       <div class="login-buttons-list light-border">
         {{> Template.dynamic template=name}}
       </div>
    {{/with}}
    {{> _loginButtonsMessages ""}}
   {{else}}
     {{#with unclickedMessage}}
       <p>{{.}}</p>
     {{/with}}
   {{/if}}
  </div>
</template>

<template name="accountCardSignInButton">
  {{> accountCard account}}

  {{#if currentUser}}
    <p>{{_ "accounts.identity.accountCardSignInButton.reSign"}}</p>
  {{else}}
    <p>{{_ "accounts.identity.accountCardSignInButton.howToSignIn"}}</p>
  {{/if}}

  {{#each account.credentials}}
    {{> credentialCardSignInButton credential=. }}
  {{/each}}
</template>
